.center {
    width: 100%;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    :global {

        .echart-box {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: orange;

            .value {
                color: aqua;
                font-size: 38px;
                font-weight: 600;
                width: 100%;
                text-align: center;
            }

            .label {}
        }

        .text-box {
            flex: 1;
            padding-left: 10px;

            .text-item {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 4px 0;

                span {
                    display: inline-block;
                }

                .icon {
                    width: 12px;
                    height: 12px;
                    background-color: white;
                    margin-right: 5px;
                }

                .color1 {
                    background-color: #4710d3;
                }

                .color2 {
                    background-color: #14b0ee;
                }

                .color3 {
                    background-color: #dfd218;
                }
            }
        }
    }
}

.btnBox {
    // width: 80px;
    display: flex;

    :global {
        .btn {
            cursor: pointer;
            padding: 0px 4px;
            &:hover{
                background-color: #14b0ee51;
            }
        }

        .active {
            background-color: #14b0ee;
        }
    }
}